<template>
    <div>
        <Row>
          <!-- <Card> -->
            <!-- 通过Row组件的:gutter属性来调整布局之间的宽度 -->
            <!-- <el-row class="tac" :gutter="15">
            <el-col :span="4">
                <Card>
                    <el-tree @node-click="toAuthUser" :data="treeData"  node-key="orgId" ref="tree"  :props="defaultProps" ></el-tree>
                </Card>
            </el-col>
            <el-col :span="10">
                <Card>
             <div class="grid-content bg-purple"> -->
                <!-- 部门下的应用-->
                <!-- <el-form >
                    <el-table highlight-current-row  style="width: 100%"  >
                    <el-table-column prop="appCode"  label="应用编码">
                    </el-table-column>
                    <el-table-column prop="appName" label="应用名称">
                    </el-table-column>
                    </el-table>
                </el-form>
             </div>
                </Card>
            </el-col>
            <el-col :span="10" >
                <Card>
            <div class="grid-content bg-purple"> -->
                <!-- 部门下的人-->
                <!-- <el-form >
                    <el-table  highlight-current-row  style="width: 100%"  >
                    <el-table-column prop="loginId"  label="登录名">
                    </el-table-column>
                    <el-table-column prop="name" label="用户名">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="90">
                    <template slot-scope="scope"> -->
                        <!--  判断授权以否，1： -->
                        <!-- <el-button  type="text" size="small">删除</el-button>
                    </template>
                    </el-table-column>
                    </el-table>
                </el-form>
            </div>
                </Card>
            </el-col>
            </el-row>
          </Card> -->
          <!-- <el-card>
              部门授权列表
              <el-form >
                    <el-table  highlight-current-row  style="width: 100%"  >
                    <el-table-column prop="appCode"  label="应用编码">
                    </el-table-column>
                    <el-table-column prop="appName" label="应用名称">
                    </el-table-column> -->
                    <!-- <el-table-column prop="loginId"  label="登录名">
                    </el-table-column> -->
                    <!-- <el-table-column prop="name" label="部门名称">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="90">
                    <template slot-scope="scope"> -->
                        <!--  判断授权以否，1： -->
                        <!-- <el-button  type="text" size="small">授权详情</el-button>
                    </template>
                    </el-table-column>
                    </el-table>
                </el-form>
          </el-card> -->
          <!-- decisioned to be final version 授权-->
          <el-card>
            <el-form >
                <el-table :data="deptData" highlight-current-row  style="width: 100%"  >
                <!-- <el-table-column prop="appCode"  label="应用编码">
                </el-table-column>
                <el-table-column prop="appName" label="应用名称">
                </el-table-column> -->
                <!-- <el-table-column prop="loginId"  label="登录名">
                </el-table-column> -->
                <el-table-column prop="name" label="部门名称">
                </el-table-column>
                <el-table-column prop="name" label="部门名称">
                </el-table-column>
                <el-table-column prop="name" label="部门名称">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <!--  判断授权以否，1： -->
                    <el-button @click="getAppAuthDetail(scope.$index, scope.row)" type="text" size="small">应用授权详情</el-button>
                </template>
                </el-table-column>
                </el-table>
                <el-col :span="24" class="toolbar">
                    <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleDpetCurrentPageChange"
                        :current-page="deptPageNum" :page-size="pageSize" :total="deptTotal">
                    </el-pagination>
                </el-col>
            </el-form>  
          </el-card>
        </Row>
          <el-dialog :visible.sync="authAppDialogVisible" :modal-append-to-body="false">
            <el-row>
                <el-table :data="appData"  style="width: 100%">
                    <el-table-column prop="appBaseInfo.appName"  label="应用名称"  >
                    </el-table-column>
                    <el-table-column prop=".appBaseInfoappCode" label="应用编码">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scopes">
                        <el-button  v-show="!scopes.row.isAuth" @click="Click(scopes.row)" type="text" size="small">授权</el-button>
                        <el-button v-show="scopes.row.isAuth" @click="Click(scopes.row)"  type="text" size="small">取消授权</el-button>
                    <el-button @click="getUserAuthDetail(scopes.$index, scopes.row)" type="text" size="small">用户授权详情</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <el-col :span="24" class="toolbar">
                    <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleAppCurrentPageChange"
                        :current-page="pageNum" :page-size="pageSize" :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
                <span slot="footer" class="dialog-footer">
                <el-button @click="authAppDialogVisible = false">关 闭</el-button>
                </span> 
          </el-dialog>
          <el-dialog  :visible.sync="authUserDialogVisible" :modal-append-to-body="false">
                <el-row>
                <el-table :data="userData" style="width: 100%">
                    <el-table-column prop="user.name"  label="用户名"  >
                    </el-table-column>
                    <el-table-column prop="user.loginId" label="登录名">
                    </el-table-column>
                     <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scopes">
                        <el-button  v-show="!scopes.row.isAuth" @click="authToUserFun(scopes.row)" type="text" size="small">授权</el-button>
                        <el-button v-show="scopes.row.isAuth" @click="authToUserFun(scopes.row)"  type="text" size="small">取消授权</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <el-col :span="24" class="toolbar">
                    <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleUserCurrentPageChange"
                        :current-page="userPageNum" :page-size="pageSize" :total="userTotal">
                    </el-pagination>
                </el-col>
               </el-row>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="authUserDialogVisible = false">关 闭</el-button>
                    </span>
          </el-dialog>
    </div>
</template>

<script>
import {authList,deptTree,authTree,addAuth,delAuth,getAuth,wholeTree,doAuthDept,deptList,appList,userList,AuthUser,cancleAuthUser } from '../../api/api';
// import util from '../api/util'

export default {
  data() {
    return {
        treeData:[],
        deptData:[
           
        ],
        appData:[
        ],
        userData:[],
        total: 0,// 应用分页
        pageNum: 1,
        pageSize:5,
        userTotal: 0,// 用户分页
        userPageNum: 1,
        userPageSize:5,
        deptTotal: 0,// 组织分页
        deptPageNum: 1,
        deptPageSize:8,
        rowData:{},
        // row
        authAppDialogVisible:false,
        authUserDialogVisible:false,
        defaultProps: {
        label: 'name',
        children:'organizationVos',
        isLeaf: 'leaf',
        },

    };
  },
  methods: {
    formatCreateDate: function (row, column) {
        return row.createDate = (!row.createDate || row.createDate == '') ? '' : util.formatDate.format(new Date(row.createDate), 'yyyy-MM-dd hh:mm:ss');
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
            done();
        })
        .catch(_ => {});
    },
    handleClick(tab, event) {
        console.log(tab, event);
    },
    getDeptList:function(){
        let _this =  this;
        let params = {
            pageNum:_this.deptPageNum,
            pageSize:_this.deptPageSize,
        }
        deptList(params).then(function(result){
            _this.deptData = result.data.data.list,
            // _this.deptData = Object.assign([],_this.deptData,result.data.data.list),
            _this.deptPageNum = result.data.data.pageNum,
            _this.deptPageSize = result.data.data.pageSize,
            _this.deptTotal = result.data.data.total
        });
    },
    getAppAuthDetail(index,row){
        this.authAppDialogVisible= true;
        this.rowData = row;
        this.appListFun(row);
        this.rowData = row;
        console.log(row)
    },
    getUserAuthDetail(index,row){
        this.authUserDialogVisible = true;
        this.rowData = row;
        this.userlistFun(row);
    },
    appListFun(row){//应用列表
        let _this = this;
        // let rowData =  Object.assign({}, row);
        let params = {
			pageNum: this.pageNum,
            pageSize:this.pageSize,
            dept:row.orgSerialNo,
        };
        console.log(params);
        // this.listLoading = true;
        //NProgress.start();
        appList(params).then(function(result){
            _this.appData = result.data.data.list;
            console.log(_this.appData);
            // _this.appData = Object.assign([],_this.appData,result.data.data);
            _this.pageNum = result.data.data.pageNum;
            _this.pageSize = result.data.data.pageSize;
            _this.total = result.data.data.total;
            // this.listLoading = false;
        }).catch(function (error) {
            // this.listLoading = false;
            console.log(error);
        });
    },
    userlistFun(row){
        let _this = this;
        let params = {
			pageNum: this.userPageNum,
            pageSize:this.userPageSize,
            orgSerialNo:row.organization.orgSerialNo,
            appCode:row.appBaseInfo.appCode,
            // dept:
        };
        userList(params).then(function(result){
            _this.userData = result.data.data.list;
            _this.userPageNum = result.data.data.pageNum,
            _this.userPageSize = result.data.data.pageSize,
            _this.userTotal = result.data.data.total,
            console.log(_this.userData)
        });
    },
    handleUserCurrentPageChange: function (userPageNum) {// 翻页动作
    // console.log(">>>>>roeDATA>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"),
    // console.log(this.rowData)
        this.userPageNum = userPageNum;
        this.userlistFun(this.rowData);// 翻页后刷新页面数据
    },
    handleAppCurrentPageChange: function (pageNum) {// 翻页动作
        this.pageNum = pageNum;
        this.appListFun(this.rowData);// 翻页后刷新页面数据
    },
    handleDpetCurrentPageChange: function (deptPageNum) {// 翻页动作
        this.deptPageNum = deptPageNum;
       this.getDeptList();// 翻页后刷新页面数据
    },
    //应用授权
    Click(row){
           let _this = this;
            // console.log("row。。。。。。。。。。。。。。。。。。。")
            console.log(row)
            if(row.isAuth){
              //to do 取消授权 
              this.$confirm('确认取消授权吗？', '提示', {}).then(() => {
                  delAuth(row).then(function(res){
                    _this.deptListLoading = false;
                    _this.$message({
                        message: '成功',
                        type: 'success'
                    });
                  _this.appListFun(_this.rowData);
                  });
              })
            }else{
              // 授权
                this.$confirm('确认授权吗？', '提示', {}).then(() => {
                    addAuth(row).then(function(res){
                        _this.deptListLoading = false;
                        _this.$message({
                            message: '成功',
                            type: 'success'
                        });
                        _this.appListFun(_this.rowData);
                    });
                })
            }
    },
    //用户授权
    authToUserFun(row){
        debugger
        let _this = this;
        if(row.isAuth){
              //to do 取消授权 
            this.$confirm('确认取消授权吗？', '提示', {}).then(() => {
                cancleAuthUser(row).then(function(res){
                    //  _this.deptListLoading = false;
                    _this.$message({
                            message: '成功',
                            type: 'success'
                    });
                    _this.userlistFun(_this.rowData);
                });
            });
            }else{
              // 授权
              this.$confirm('确认授权吗？', '提示', {}).then(() => {
                  AuthUser(row).then(function(res){
                      //  _this.deptListLoading = false;
                       _this.$message({
                            message: '成功',
                            type: 'success'
                    });
                    _this.userlistFun(_this.rowData);
                  });
              });
            }

    },


    loadData(node,resolve){
        if(node.level ===0){
            let params ={}
        authList(params).then(res => {
                debugger
                resolve(res.data);
        }).catch(function (error) {
            this.$message.warning('系统异常 ');
        });
        return;
        }

        // if(node.level>0){
        //     let params ={}
        //     params.orgSerialNo = node.data.orgSerialNo;
        // console.log(params);
        // wholeTree(params).then(res => {
        //     debugger
        //     // res.data.map(item=>{
        //     //     console.log(item)
        //     //     console.log("============================================================")
        //     //     if(item.orgId==null){
        //     //         item.leaf=true;
        //     //     }
        //     // });
        //     resolve(res.data);
        // }).catch(function (error) {
        //     this.$message.warning('系统异常 ');
        // });
        // return;
        // }
        return ;
    },
        toAuthUser:function(a,b,c){
            console.log(a)
        let data =  b.checkedNodes;
        let params ={
        }
        params.toHandleList = data;
    //    params.appCode = this.obj.appCode;
    //    addAuth(params).then(res =>{
    //        console.log(res)
    //    });
    },
    
  },
  computed: {
    
  },
  created() {

  },
  mounted(){
      this.getDeptList();
    //   this.appListFun();
    //   this.userlistFun();
    // var _this = this;
    // wholeTree({}).then(res => {
    //     console.log(res)
    //     _this.treeData = res.data;
    // }).catch(function (error) {
    //     this.$message.warning('系统异常 ');
    // });
  }
};
</script>
